<template>
  <div class="pagination">
    <n-pagination
      v-model:page="page"
      :item-count="total"
      :page-sizes="pageSizes"
      size="medium"
      show-quick-jumper
      show-size-picker
      :on-update:page="handleChangePage"
      :on-update:page-size="handleChangePageSize"
    />
  </div>
</template>

<script lang="ts" setup>
  const emit = defineEmits(['update:pageNum', 'update:pageSize', 'update:pageNum'])

  const props = withDefaults(
    defineProps<{
      // 总数
      total: number
      // 当前页数
      pageNum: number
      // 每页条数
      pageSize: number
      // 每页条数
      pageSizes?: number[]
    }>(),
    {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pageSizes: () => [10, 20, 30, 40]
    }
  )
  // 页数
  const page = computed({
    get: () => props.pageNum,
    set: val => emit('update:pageNum', val)
  })

  const handleChangePage = (val: number) => emit('update:pageNum', val)

  const handleChangePageSize = (val: number) => emit('update:pageSize', val)
</script>

<style scoped lang="scss">
  .pagination {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
  }
</style>
